import React = require("react");
import { MemberService } from "services/member";
import * as ui from "maishu-ui-toolkit";
import tips from "tips";
import { PageProps } from "maishu-chitu-react";
import { VirtualMobile } from "controls/virtual-mobile";

let allColors: StyleColor[] = ['default', 'red', 'green', 'pink', 'goldenrod'];
export default class StoreStylePage extends React.Component<PageProps, { color?: StyleColor }> {
    productPage: VirtualMobile;
    shoppingCartPage: VirtualMobile;
    homePage: VirtualMobile;

    constructor(props) {
        super(props);
        this.state = {};
    }

    setCurrentStyle(name: StyleColor) {
        this.setState({ color: name })
    }

    async save() {
        let member = this.props.createService(MemberService);
        let store = await member.getStore();
        store.Style = this.state.color;
        return member.saveStore(store);
    }

    async componentDidMount() {
        let member = this.props.createService(MemberService);
        let store = await member.getStore();
        this.setState({ color: store.Style });
    }


    render() {
        let { color } = this.state;
        color = color || "default";
      
        let scale = 0.85;
        return <div className="station-store-style">
            <ul key={10} style={{ margin: 0 }} >
                <li className="pull-right">
                    <button className="btn btn-sm btn-primary"
                        ref={(e: HTMLButtonElement) => {
                            if (!e) return;
                            ui.buttonOnClick(e, () => {
                                return this.save();
                            }, { toast: tips.saveSuccess })
                        }}>
                        <i className="icon-save"></i>
                        <span>保存</span>
                    </button>
                </li>
                <li className="clearfix">
                </li>
            </ul>
            <hr />
            <div className="style-editor clearfix">
                <div className="style-solutions">
                    <span className="header">选择配色方案</span>
                    <ul>
                        {allColors.map(o =>
                            <li key={o} className={o == color ? "btn-link active" : 'btn-link'}
                                onClick={() => this.setCurrentStyle(o)}>
                                <div className={o}></div>
                            </li>
                        )}
                    </ul>
                </div>
            </div>
            <div className={`row ${color}`}>
                <div className="col-md-4" style={{ textAlign: 'center' }}>
                    <VirtualMobile scale={scale} color={color} displayMobile={true}
                        ref={e => this.homePage = e || this.homePage} />
                </div>
                <div className="col-md-4" style={{ textAlign: 'center' }}>
                    <VirtualMobile scale={scale} color={color} displayMobile={true}
                        ref={e => this.shoppingCartPage = e || this.shoppingCartPage} />
                </div>
                <div className="col-md-4" style={{ textAlign: 'center' }}>
                    <VirtualMobile scale={scale} color={color} displayMobile={true}
                        ref={e => this.productPage = e || this.productPage} />
                </div>
            </div>
        </div>
    }
}